/* General Body and Navigation Styles */
body {
    background-color: black;
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
}

/* UPDATED NAV STYLES */
nav {
    text-align: center;
    padding: 10px; /* Reduced padding slightly for all screen sizes */
    display: flex; /* Turn the nav into a flex container */
    justify-content: center; /* Center the links horizontally */
    flex-wrap: wrap; /* Allow wrapping just in case, but we aim to prevent it */
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px 15px; /* Default padding for desktop */
    font-size: 18px; /* Default font size for desktop */
    white-space: nowrap; /* Prevents the text inside a link from breaking */
}

/* Content and Image Styles */
.content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.header-gif {
    display: block;
    width: 100%;
    max-width: 350px; /* Adjust as needed */
    margin: 0 auto 40px auto;
}

/* VIDEO STYLES - MODERN CSS */
.videos-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center; /* Helps vertically align items if they have different heights */
}

.video-container {
    /* This tells the YouTube video containers to be 16:9 */
    aspect-ratio: 16 / 9;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- MEDIA QUERY FOR DESKTOP --- */
@media screen and (min-width: 768px) {
    .videos-gallery {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 30px;
    }
}

/*
  =======================================================
  SPECIAL STYLES for a CENTERED SQUARE Bandcamp Player
  =======================================================
*/
.bandcamp-container {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.bandcamp-container iframe {
  width: 100%;
  height: 100%;
}

/*
  =======================================================
  NEW MEDIA QUERY FOR MOBILE NAVIGATION
  =======================================================
*/
@media screen and (max-width: 767px) {
  /* This code only applies to screens SMALLER than 768px (i.e., phones) */

  nav a {
    /* Reduce font size to save space */
    font-size: 15px; 

    /* Reduce horizontal padding significantly */
    padding: 5px 6px;
  }

}